<template>
  <div class="login-head">
    <span class="logo" @click="toHome">
      <img src="@/assets/img/logo.png" />
    </span>
    <span class="info">大学生校园威客平台</span>
    <span class="register">
      <span>{{ message }}</span>
      <el-button @click="changeBtn">{{ info }}</el-button>
    </span>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineEmits } from 'vue'
import { useRouter } from 'vue-router'
const emit = defineEmits(['change'])
const router = useRouter()

const hasAnumber = ref<Boolean>(true)
const message = ref<string>('还没有注册账号?')
const info = ref<string>('注册')


//改变登录或是注册
const changeBtn = ():void => {
  if (!hasAnumber.value) {
    hasAnumber.value = true
    message.value = '还没有注册账号?'
    info.value = '注册'
  } else {
    hasAnumber.value = false
    message.value = '已有账号?'
    info.value = '登录'
  }
  //发送事件给父组件
  emit('change', hasAnumber.value)
}
const toHome = ():void => {
  router.push('/main/index')
}
</script>

<style lang="less" scoped>
.login-head {
  height: 60px;
  border-bottom: 2px solid #e9e9eb;
  .logo {
    cursor: pointer;
    img {
      height: 60px;
    }
  }

  .info {
    line-height: 60px;
    margin-left: 30px;
  }
  .register {
    display: block;
    float: right;
    line-height: 60px;
    margin-right: 50px;
    span {
      color: #73767a;
      margin-right: 10px;
    }
  }
}
</style>
